<template>
  <el-container style="padding: 10px">
    <el-aside>
      <tag-tree @selectParent="selectTag"></tag-tree>
    </el-aside>
    <el-main>
      <h3>{{update? '更新文件': '新建文件'}}</h3>
      <el-form size="mini">
        <el-form-item label="文件">
          <el-input type="file" ref="file" @change="addFile" v-model="file" ></el-input>
        </el-form-item>
        <el-form-item label="更新内容" v-if="update">
          <el-input v-model="content"></el-input>
        </el-form-item>
        <el-form-item label="文件名" v-if="!update">
          <el-input placeholder="请输入内容" v-model="formData.fileName">
            <template slot="append">{{formData.fileType}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="选择可见类型" v-if="!update">
          <el-select placeholder="可见类型" v-model="formData.visibleType">
            <el-option
              v-for="item in this.visibleTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="左侧选择标签" v-if="!update">
          <el-tag
            style="margin-left: 5px"
            v-for="tag in tags"
            closable
            @close="closeTag(tag)">
            {{tag.name}}
          </el-tag>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update ? updateFile() :submit()" :disabled="hasSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import TagTree from '../../tags/components/TagTree'
  export default {
    name: 'index',
    components: { TagTree },
    data: function() {
      return {
        formData: {
          fileName: null,
          fileType: null,
          visibleType: null,
        },
        visibleTypeList: [],
        file: null,
        tags: [

        ],
        update: false,
        fileId: null,
        content: null,
        hasSubmit: false,
      }
    },
    computed: {
    },
    watch: {

    },
    created() {
      this.update = this.$route.params.update != null ? this.$route.params.update: this.update;
      this.fileId = this.$route.params.fileId != null ? this.$route.params.fileId: null;
      this.getDictList();
    },
    methods: {
      submit() {
        let formData = {...this.formData};
        delete formData['file']
        formData['fileName'] = formData['fileName'] + "." + this.formData.fileType;
        let data = new FormData();
        data.append('file', this.$refs.file.$el.querySelector("input").files[0]);
        data.append("tagList", this.tags.map(item => {return item.id}).join(","));
        for (let formDataKey in formData) {
          data.append(formDataKey, formData[formDataKey]);
        }
        // console.log(this.$refs.file.$el.querySelector("input").files[0])
        // console.log(this.formData);
        this.$api.upload(data).then(res => {
          console.log(res);
          this.$message.success(res.data.message)
          this.hasSubmit = true;
        })
      },
      updateFile() {
        let data = new FormData();
        data.append("fileId", this.fileId);
        data.append("content", this.content);
        data.append('file', this.$refs.file.$el.querySelector("input").files[0]);
        this.$api.updateFile(data).then(res => {
          this.$message.info(res.data.messgae);
        });
      },
      addFile() {
        this.formData.file = this.$refs.file.$el.querySelector("input").files[0];
        // console.log(this.$refs.file.$el.querySelector("input"))
        let fileNameArr = this.formData.file.name.split('.');
        this.formData.fileType = fileNameArr[fileNameArr.length-1];
        this.formData.fileName = this.formData.file.name.replace("." + this.formData.fileType, "");
      },
      getDictList() {
        this.$api.getDictListByType("visible_type").then(res => {
          this.visibleTypeList = res;
        });
      },
      selectTag({id, tagName}) {
        if (this.tags.filter(item => {return item.id == id}).length == 0) {
          this.tags.push({ id: id, name: tagName });
        }
      },
      closeTag(tag) {
        this.tags.splice(this.tags.indexOf(tag), 1);
      },
    }
  }
</script>

<style scoped>

</style>
